<template>
	<u-popup :show="show" mode="bottom" @close="closeLogin" @open="openLogin">
		<view class="login">
			<view class="container">
				<view class="close-box" @tap="closeLogin" bind:tap="cancel">
					<image class="close-img" src="/static/close.png" />
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<view class="p-name" v-if="getUserInfoTag">
					快充充充电平台欢迎你
				</view>
				<button class="submit-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
					v-if="getPhoneNumberTag">
					<image src="/static/wechat.png" class="wechat-img" />
					<text>点击获取微信用户信息</text>
				</button>
				<!-- #endif  -->
				<view class="serve-info">点击登录/注册充电平台，即表示已阅读并同意</view>
				<view class="serve-text">
					<view @tap="gotoWeb('https://uniapp.dcloud.io/component/mp-weixin-plugin')">《隐私政策》</view>
					<view @tap="gotoWeb('https://developers.weixin.qq.com/miniprogram/dev/framework/')">《用户协议》</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</u-popup>
</template>

<script>
	import WXBizDataCrypt from '@/common/WXBizDataCrypt.js';
	import {
		mapState,
		mapActions
	} from 'vuex'
	let that;
	export default {
		name: "com-login",
		data() {
			return {
				// 登陆组件是否显示
				show: false,
				// 是否获取用户信息
				// #ifndef MP-WEIXIN
				getPhoneNumberTag: false,
				// #endif
				// #ifdef MP-WEIXIN
				getPhoneNumberTag: true,
				// #endif
				code: '',
				session_key: '',
				iv: '',
				encryptedData: '',
				phoneNumber: ''

			};
		},
		mounted() {
			that = this
			that.getwxcode()
		},
		methods: {
			...mapActions(['userLoginAction', 'userLogoutAction', 'userGetWxcode', 'userGetWxopenid']),
			// 关闭弹窗
			closeLogin() {
				this.show = false
			},
			// 打开登陆弹窗
			openLogin() {
				this.show = true
			},
			//获取微信登陆code凭证
			getwxcode() {
				wx.login({
					success: res => {
						that.code = res.code;
						that.userGetWxcode(res.code);
					}
				})
			},
			getOpenid(encryptedData, iv) { // 获取密钥 === 需要登录才可以获取密钥
				uni.request({
					url: 'https://api.weixin.qq.com/sns/jscode2session', // 请求微信服务器
					method: 'GET',
					data: {
						appid: this.$wxparam.appid, //你的小程序的APPID
						secret: this.$wxparam.vsecret, //你的小程序秘钥secret,  
						js_code: this.code, //wx.login 登录成功后的code
						grant_type: 'authorization_code' //此处为固定值
					},
					success: (res) => {
						that.session_key = res.data.session_key;
						that.userGetWxopenid(res.data.openid);
						let pc = new WXBizDataCrypt(this.$wxparam.appid, res.data.session_key);
						let data = pc.decryptData(encryptedData, iv);
						that.phoneNumber = data.phoneNumber
						//console.log(that.phoneNumber)
						console.log('、、、、、、、、、、、、、、、、、、'+JSON.stringify(data))
						that.$http_api.user_login({
							phoneNumber: that.phoneNumber,
						}).then((res) => {
							that.show = false
							console.log(JSON.stringify(res))
							that.userLoginAction(res)
							that.$emit('myevent', res)
						})
					}
				});
			},
			// 微信授权
			getPhoneNumber(e) {
				// #ifdef MP-WEIXIN
				that.getwxcode()
				const {
					errMsg,
					encryptedData,
					iv
				} = e.detail;
				if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
					console.log('用户拒绝授权=>');
				} else {
					console.log('用户同意授权=>', errMsg);
					//登录凭证校验,返回用户唯一标识、会话密钥
					that.getOpenid(encryptedData, iv);
				}
				// #endif

			},

		}
	}
</script>

<style lang="scss" scoped>
	.login {
		display: flex;
		align-items: flex-end;

		.container {
			z-index: 999;
			display: flex;
			flex-direction: column;
			width: 100%;
			padding: 40upx 20upx;
			background-color: #f1f1f1;
			border-radius: 20upx;
			align-items: center;
			position: relative;

			.p-name {
				margin-top: 48upx;
				font-size: 36upx;
				font-weight: normal;
			}

			.close-box {
				position: absolute;
				right: 32upx;
				top: 38upx;
				width: 56.56upx;
				height: 56.56upx;
				padding: 10upx;

				.close-img {
					width: 70%;
					height: 70%;
				}
			}
		}

		.header {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 28upx;

			.logo-wrap {
				width: 144upx;
				height: 144upx;
				overflow: hidden;
				border-radius: 20upx;
			}

			.logo {
				width: 100%;
				height: 100%;
			}
		}

		.info {
			color: #333;
		}

		.submit-btn {
			width: 642upx;
			height: 88upx;
			margin-top: 60upx;
			margin-bottom: 60upx;
			border-radius: 44upx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			color: #fff;
			background-color: #23BF61;
			font-size: 36upx;

			.wechat-img {
				width: 44upx;
				height: 34upx;
				margin: 0 18upx;
			}
		}

		.phone-login {
			color: #0046f5;
			font-size: 28upx;
			margin-top: 40upx;
			border: none;
			background-color: #f1f1f1;
		}

		.cancel-btn {
			width: 100%;
			margin-top: 60upx;
			color: #333;
			background-color: #f1f1f1;
		}

		.serve-info {
			font-size: 22upx;
			margin-top: 20upx;
		}

		.serve-text {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			font-size: 22upx;
			color: #6079b8;
			margin-top: 10upx;
		}
	}

	button::after {
		border: none;
	}

	.btns {
		margin-top: 20upx;
		text-align: center;

		.ubtn {
			display: inline-block;
			margin: 0 20upx;
		}
	}

	.type {
		margin-top: 80upx;
	}
</style>